<template>
  <div class="container">
    <div class="item1">
      <div class="xiala">
        <el-col :span="24">
          <el-menu
            router
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-sub-menu index="1">
              <template #title>
                <span>练习室</span>
              </template>
              <el-menu-item index="" style="color: red"
                >我的练习室</el-menu-item
              >
            </el-sub-menu>
            <el-menu-item index="/practive/mediaCache">缓存</el-menu-item>
            <el-button text @click="open" style="margin-left: 5px; color: black"
              >音频库</el-button
            >

            <el-menu-item index="/practive/Collections">收藏</el-menu-item>
            <el-menu-item index="/practive/viewRecords">历史</el-menu-item>
          </el-menu>
        </el-col>
      </div>

      <!-- <div class="left"></div> -->
    </div>
    <div class="item2">
      <div class="headerItem">
        <div class="navigationLeft">
          <div class="detail" @click="handlerChangeTab">
            <div :class="flag === 'all' ? 'active' : ''">
              <span data-myListCategory="all">全部</span>
            </div>
            <div :class="flag === 'my_create' ? 'active' : ''">
              <span data-myListCategory="my_create">我创建的</span>
            </div>
            <div :class="flag === 'my_join' ? 'active' : ''">
              <span data-myListCategory="my_join">我加入的</span>
            </div>
            <div :class="flag === 'my_course' ? 'active' : ''">
              <span data-myListCategory="my_course">我课程的</span>
            </div>
          </div>
        </div>

        <div class="navigationRight">
          <QR />
        </div>
      </div>
      <div class="right">
        <index />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import index from "../../components/practive/noData/index.vue";

export default {
  components: {
    index,
  },
};
</script>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type { Action } from "element-plus";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
// 引用仓库
import useUserInfoStore from "../../store/practive/index";
// 使用仓库
const hos = useUserInfoStore();
//初始挂载
onMounted(() => {
  hos.getPractice();
});




let flag = ref("all");

const handleOpen = (key: string, keyPath: string[]) => {}
const handleClose = (key: string, keyPath: string[]) => {
	console.log(key, keyPath)
}

const open = () => {
  ElMessageBox.alert('请打开中舞网APP，点击"练习室"-"音频库"中查看。', {
    confirmButtonText: "确定",
  });
};




//切换标签页回调
const handlerChangeTab = (e: any) => {
  //如果有自定义的data-,才执行
  let { mylistcategory } = e.target.dataset;
  if (mylistcategory) {
    //修改flag为对应点击的值
    flag.value = mylistcategory;
    //更新数组
    hos.getPractice(mylistcategory === 'all' ? undefined : mylistcategory)
  }
};
</script>

<style scoped>
.container {
  background-color: #c1c1c1;
  width: 1200px;
  margin: auto;
  font-size: 14px;
  display: flex;
}
.xiala {
	width: 170px;
	border-radius: 5px;
	height: 50px;
	line-height: 50px;
}
/* .left {
  width: 170px;
  height: 200px;
  border-radius: 5px;
  margin-top: 10px;
} */
.headerItem {
	width: 1020px;
	height: 100px;
	background-color: #fff;
	border-radius: 5px;
	float: right;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
/* .navigationLeft  {
  width: 100px;
  height: 35px;
  
  
  list-style: none;
  margin-right: 24px;
  
} */
.detail {
	display: flex;
	margin-left: 30px;
	width: 400px;
}
.detail div {
	width: 60px;
	height: 30px;
	margin-right: 24px;
	text-align: center;
	line-height: 30px;
	color: #7d8090;
}

.active {
	background-color: #f93684;
	color: #fff !important;
	border-radius: 5px;
}

.right {
	width: 1020px;
	height: 730px;
	background-color: #fff;
	border-radius: 5px;
	float: right;
	margin-top: 10px;
}
</style>
